<template>
    <div id="navs">
        <ul>
            <li v-for="nav in navs" :key="nav.id">
                <div class="iocn" :class="[nav.iocn,nav.iocn==active?'active':'']"></div>
                <p><router-link :to="nav.path" class="p" :class="[nav.p,nav.p==active1?'active1':'']">{{nav.text}}</router-link></p> 
            </li>       
        </ul>
    </div>
</template>
<script>
    export default {
        props:['active','path','active1'],
        data(){
            return {
                navs:[]
            }
        },
        created(){
            this.getNavs()
        },
        methods:{
            getNavs(){
                this.axios.get('/navs').then((ret)=>{
                    let{data,error}=ret.data
                    this.navs=data
                }).catch(()=>{})
            }
        }
    }
</script>
<style scoped lang="scss">
//底部导航
*{
    margin:0;
    padding:0;
    list-style-type:none;
    text-decoration:none;
}
    #navs{
        width:750px;
        height:100px;
        border-top:1px solid #999;
        position:fixed;
        z-index:100;
        bottom:0;
        background-color:#fff;

        ul{
            width:100%;
            height:100px;
            display:flex;

            li{
                display:block;
                width:150px;
                height:100px;
                text-decoration:none;

                .iocn{
                    display:block;
                    width:50px;
                    height:45px; 
                    margin:5px auto;
                    background:no-repeat url('/static/iocns.png');
                    background-size:100%;                 
                }
                .iocn-nav1{
                   background-position:5px -10px; 
                }
                .iocn-nav1.active{
                    background-position:5px -115px;
                }
                .iocn-nav2{
                   background-position:5px -1050px; 
                }
                .iocn-nav2.active{
                    background-position:5px -1160px;
                }
                .iocn-nav3{
                   background-position:5px -222px; 
                }
                .iocn-nav3.active{
                    background-position:5px -325px;
                }
                .iocn-nav4{
                   background-position:5px -428px;  
                }
                .iocn-nav4.active{
                    background-position:5px -530px;
                }
                .iocn-nav5{
                   background-position:5px -636px; 
                }
                .iocn-nav5.active{
                    background-position:5px -740px;
                }
                
                p{
                    text-align:center;
                    width:150px;
                    height:50px;
                    line-height:35px;
                    font-size:24px;
                    color:#555;

                    .p{
                        color:#555;
                    }
                    .p.active1{
                        color:#39ac69
                    }
                }               
            }
        }
    }   
</style>


